31. Make it Pretty

Question:

Make your App Pretty

For this quiz you’ll be making your app look like this:

We’ll do this in five steps:

1. Copy over new contents for the styles.xml file.
2. Make a grey line between the two LinearLayouts.
3. Adjust the LinearLayouts sizes.
4. Update the text size, color and font.
5. Add the correct padding and margin.

Step 1 : Copy Over New styles.xml File

The styles.xml file is a type of resource file that defines the format and look for a layout. You can set things like button colors and the color of the action bar.

The XML code to copy is below.

<resources>
   <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light">
       <!-- Primary theme color of the app (sets background color of app bar) -->
       <item name="colorPrimary">#FF9800</item>
       <!-- Background color of buttons in the app -->
       <item name="colorButtonNormal">#FF9800</item>
   </style>
</resources>

colorPrimary will change the color of the Action Bar.
colorButtonNormal will change the color of the Buttons.

Note: colorButtonNormal will only work on phones running API 22 and above. So if you have an older phone, the buttons will not be colored orange.

Step 2 : Make the Grey Line

You can use the View tag to make a view box and you can then color in the box using the background attribute. The color of the view should be @android:color/darker_gray. By making the box 1dp wide, it will look like a line.

Figuring out where exactly to position the box is up to you.

Step 3 : Adjust the LinearLayouts

When you first add the view, you might see that the layout looks like this:

You’ll need to adjust the sizes of various views so that the grey line extends only to the end of the buttons (don’t worry about the top of the line, you’ll fix that in step 5). DO NOT use fixed widths, instead use match_parent and wrap_content only.

Step 4 : Update the Text Size, Color and Font

Update the the TextViews to the following specifications.

Team Name TextViews:

• Size 14sp
• Color #616161
• Font sans-serif-medium

Score TextViews

• Size 56sp
• Color #000000
• Font sans-serif-light

Step 5 : Padding and Margin

Update the layout to have the correct spacing, as shown in the diagram:

Solution: